/* Search box styles */
@import '../../styles/variables';
@import '../../styles/mixins';
@import '../DONavigation/_DONavigationVariables';

:global {
  .od-SearchBox {
    background-color: $ms-color-neutralPrimaryAlt;
    width: 100%;
    padding-right: $od-Header-searchHeight;
    padding-left: 8px;
    height: 100%;
    position: relative;

    fieldset {
      border: 0;
      height: auto;
      padding: 0;
      margin: 0;
    }

    @include high-contrast {
      border: 1px solid WindowText;
    }
  }

  .od-SearchBox-field {
    background-color: transparent;
    height: $od-Header-searchHeight;
    width: 100%;
    border: 0;
    font-size: $ms-font-size-l;
    color: $ms-color-white;
  }

  .od-SearchBox-button {
    background: none;
    background-color: transparent;
    border: 0;
    color: transparent;
    position: absolute;
    @include ms-right(0);
    top: 0;
    height: $od-Header-searchHeight - 4px;
    width: $od-Header-searchHeight;
    overflow: hidden;
    line-height: 30px;

    &.ms-Icon:before {
      font-size: $ms-font-size-xl;
      color: $ms-color-white;
      position: absolute;
    }
  }
}
